<template>
  <div class="settings">
    <div class="settings-layout">
      <!-- 侧边导航 -->
      <div class="settings-sidebar">
        <el-menu
          :default-active="activeMenu"
          @select="handleMenuSelect"
          class="settings-menu"
        >
          <!-- 系统配置分组 -->
          <el-sub-menu index="system">
            <template #title>
              <el-icon><Setting></Setting></el-icon>
              <span>系统配置</span>
            </template>
            <el-menu-item index="basic">
              <el-icon><Setting></Setting></el-icon>
              <span>基本设置</span>
            </el-menu-item>
            <el-menu-item index="network">
              <el-icon><Connection></Connection></el-icon>
              <span>网络设置</span>
            </el-menu-item>
            <el-menu-item index="storage">
              <el-icon><FolderOpened></FolderOpened></el-icon>
              <span>存储设置</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 安全管理分组 -->
          <el-sub-menu index="security-group">
            <template #title>
              <el-icon><Lock></Lock></el-icon>
              <span>安全管理</span>
            </template>
            <el-menu-item index="security">
              <el-icon><Lock></Lock></el-icon>
              <span>安全设置</span>
            </el-menu-item>
            <el-menu-item index="users">
              <el-icon><User></User></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="permissions">
              <el-icon><Key></Key></el-icon>
              <span>权限管理</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 运维工具分组 -->
          <el-sub-menu index="operations">
            <template #title>
              <el-icon><Tools></Tools></el-icon>
              <span>运维工具</span>
            </template>
            <el-menu-item index="diagnostic">
              <el-icon><Tools></Tools></el-icon>
              <span>设备诊断</span>
            </el-menu-item>
            <el-menu-item index="software-info">
              <el-icon><InfoFilled></InfoFilled></el-icon>
              <span>软件信息</span>
            </el-menu-item>
            <el-menu-item index="monitoring">
              <el-icon><Monitor></Monitor></el-icon>
              <span>系统监控</span>
            </el-menu-item>
            <el-menu-item index="logs">
              <el-icon><Document></Document></el-icon>
              <span>日志管理</span>
            </el-menu-item>
            <el-menu-item index="backup">
              <el-icon><Download></Download></el-icon>
              <span>备份恢复</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 通知与报告分组 -->
          <el-sub-menu index="notifications">
            <template #title>
              <el-icon><Bell></Bell></el-icon>
              <span>通知报告</span>
            </template>
            <el-menu-item index="notification">
              <el-icon><Bell></Bell></el-icon>
              <span>通知设置</span>
            </el-menu-item>
            <el-menu-item index="reports">
              <el-icon><DataAnalysis></DataAnalysis></el-icon>
              <span>报告中心</span>
            </el-menu-item>
            <el-menu-item index="alerts">
              <el-icon><Warning></Warning></el-icon>
              <span>告警管理</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 系统信息 -->
          <el-menu-item index="system-info">
            <el-icon><InfoFilled></InfoFilled></el-icon>
            <span>系统信息</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 主内容区 -->
      <div class="settings-content">
        <el-card v-if="activeMenu !== 'diagnostic'">
          <template #header>
            <div class="card-header">
              <span>{{ getMenuTitle() }}</span>
              <div>
                <el-button @click="resetSettings">重置</el-button>
                <el-button type="primary" @click="saveSettings">保存设置</el-button>
              </div>
            </div>
          </template>

          <div class="settings-form">
            <!-- 基本设置 -->
            <div v-if="activeMenu === 'basic'">
              <el-form :model="settings.basic" label-width="150px">
                <el-form-item label="系统名称">
                  <el-input v-model="settings.basic.systemName" placeholder="ONVIF设备管理系统" />
                </el-form-item>
                <el-form-item label="管理员邮箱">
                  <el-input v-model="settings.basic.adminEmail" placeholder="admin@example.com" />
                </el-form-item>
                <el-form-item label="系统语言">
                  <el-select v-model="settings.basic.language">
                    <el-option label="中文" value="zh-CN" />
                    <el-option label="English" value="en-US" />
                  </el-select>
                </el-form-item>
                <el-form-item label="时区">
                  <el-select v-model="settings.basic.timezone">
                    <el-option label="北京时间 (UTC+8)" value="Asia/Shanghai" />
                    <el-option label="UTC" value="UTC" />
                  </el-select>
                </el-form-item>
                <el-form-item label="自动保存">
                  <el-switch v-model="settings.basic.autoSave" />
                </el-form-item>
              </el-form>
            </div>

            <!-- 网络设置 -->
            <div v-if="activeMenu === 'network'">
              <el-form :model="settings.network" label-width="150px">
                <el-form-item label="服务器端口">
                  <el-input-number v-model="settings.network.serverPort" :min="1" :max="65535" />
                </el-form-item>
                <el-form-item label="ONVIF端口">
                  <el-input-number v-model="settings.network.onvifPort" :min="1" :max="65535" />
                </el-form-item>
                <el-form-item label="连接超时">
                  <el-input-number v-model="settings.network.timeout" :min="1" :max="300" />
                  <span style="margin-left: 10px">秒</span>
                </el-form-item>
                <el-form-item label="重试次数">
                  <el-input-number v-model="settings.network.retryCount" :min="0" :max="10" />
                </el-form-item>
                <el-form-item label="启用HTTPS">
                  <el-switch v-model="settings.network.enableHttps" />
                </el-form-item>
                <el-form-item label="代理设置">
                  <el-input v-model="settings.network.proxy" placeholder="http://proxy.example.com:8080" />
                </el-form-item>
              </el-form>
            </div>

            <!-- 存储设置 -->
            <div v-if="activeMenu === 'storage'">
              <el-form :model="settings.storage" label-width="150px">
                <el-form-item label="数据存储路径">
                  <el-input v-model="settings.storage.dataPath" readonly>
                    <template #append>
                      <el-button @click="selectDataPath">选择</el-button>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="日志存储路径">
                  <el-input v-model="settings.storage.logPath" readonly>
                    <template #append>
                      <el-button @click="selectLogPath">选择</el-button>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="最大存储空间">
                  <el-input-number v-model="settings.storage.maxStorage" :min="1" :max="1000" />
                  <span style="margin-left: 10px">GB</span>
                </el-form-item>
                <el-form-item label="自动清理">
                  <el-switch v-model="settings.storage.autoCleanup" />
                </el-form-item>
                <el-form-item label="保留天数" v-if="settings.storage.autoCleanup">
                  <el-input-number v-model="settings.storage.retentionDays" :min="1" :max="365" />
                  <span style="margin-left: 10px">天</span>
                </el-form-item>
              </el-form>
            </div>

            <!-- 安全设置 -->
            <div v-if="activeMenu === 'security'">
              <el-form :model="settings.security" label-width="150px">
                <el-form-item label="启用认证">
                  <el-switch v-model="settings.security.enableAuth" />
                </el-form-item>
                <el-form-item label="会话超时" v-if="settings.security.enableAuth">
                  <el-input-number v-model="settings.security.sessionTimeout" :min="5" :max="1440" />
                  <span style="margin-left: 10px">分钟</span>
                </el-form-item>
                <el-form-item label="密码强度" v-if="settings.security.enableAuth">
                  <el-select v-model="settings.security.passwordStrength">
                    <el-option label="低" value="low" />
                    <el-option label="中" value="medium" />
                    <el-option label="高" value="high" />
                  </el-select>
                </el-form-item>
                <el-form-item label="启用日志审计">
                  <el-switch v-model="settings.security.enableAudit" />
                </el-form-item>
                <el-form-item label="IP白名单">
                  <el-input
                    v-model="settings.security.ipWhitelist"
                    type="textarea"
                    :rows="3"
                    placeholder="每行一个IP地址或IP段，例如：192.168.1.0/24"
                  />
                </el-form-item>
              </el-form>
            </div>

            <!-- 通知设置 -->
            <div v-if="activeMenu === 'notification'">
              <el-form :model="settings.notification" label-width="150px">
                <el-form-item label="启用邮件通知">
                  <el-switch v-model="settings.notification.enableEmail" />
                </el-form-item>
                <div v-if="settings.notification.enableEmail">
                  <el-form-item label="SMTP服务器">
                    <el-input v-model="settings.notification.smtpServer" placeholder="smtp.example.com" />
                  </el-form-item>
                  <el-form-item label="SMTP端口">
                    <el-input-number v-model="settings.notification.smtpPort" :min="1" :max="65535" />
                  </el-form-item>
                  <el-form-item label="发送邮箱">
                    <el-input v-model="settings.notification.senderEmail" placeholder="noreply@example.com" />
                  </el-form-item>
                  <el-form-item label="邮箱密码">
                    <el-input v-model="settings.notification.emailPassword" type="password" show-password />
                  </el-form-item>
                </div>
                <el-form-item label="设备离线通知">
                  <el-switch v-model="settings.notification.deviceOffline" />
                </el-form-item>
                <el-form-item label="系统错误通知">
                  <el-switch v-model="settings.notification.systemError" />
                </el-form-item>
                <el-form-item label="存储空间警告">
                  <el-switch v-model="settings.notification.storageWarning" />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-card>

        <!-- 设备诊断组件 -->
        <DeviceDiagnostic v-if="activeMenu === 'diagnostic'" />

        <!-- 软件信息 -->
        <div v-if="activeMenu === 'software-info'" class="settings-form">
          <div class="system-info-grid">

            <!-- 许可证信息 -->
            <div class="info-card">
              <div class="info-card-header">
                <div class="info-card-title">
                  <el-icon><Key></Key></el-icon>
                  许可证信息
                </div>

              </div>
              <div class="info-item">
                <span class="info-label">许可证类型</span>
                <span class="info-value">{{ licenseInfo.type }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">授权公司</span>
                <span class="info-value">{{ licenseInfo.company }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">到期时间</span>
                <span class="info-value">{{ licenseInfo.expiry }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">最大设备数</span>
                <span class="info-value">{{ licenseInfo.maxDevices }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">当前设备数</span>
                <span class="info-value">{{ licenseInfo.currentDevices }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">许可证状态</span>
                <el-tag :type="licenseInfo.status === 'valid' ? 'success' : 'danger'">
                  {{ licenseInfo.status === 'valid' ? '有效' : '无效' }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户管理 -->
        <div v-if="activeMenu === 'users'" class="settings-form">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>用户管理</span>
                <el-button type="primary" @click="addUser">
                  <el-icon><Plus></Plus></el-icon>
                  添加用户
                </el-button>
              </div>
            </template>
            <el-table :data="users" style="width: 100%">
              <el-table-column prop="username" label="用户名" />
              <el-table-column prop="email" label="邮箱" />
              <el-table-column prop="role" label="角色" />
              <el-table-column prop="status" label="状态">
                <template #default="scope">
                  <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                    {{ scope.row.status === 'active' ? '激活' : '禁用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="lastLogin" label="最后登录" />
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>

        <!-- 权限管理 -->
        <div v-if="activeMenu === 'permissions'" class="settings-form">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>权限管理</span>
              </div>
            </template>
            <el-tree
              :data="permissions"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[1, 2, 3]"
              :default-checked-keys="[5, 9, 10, 11]"
              :props="{ children: 'children', label: 'label' }"
            />
            <div style="margin-top: 20px;">
              <el-button type="primary" @click="savePermissions">保存权限</el-button>
              <el-button @click="resetPermissions">重置</el-button>
            </div>
          </el-card>
        </div>

        <!-- 系统监控 -->
        <div v-if="activeMenu === 'monitoring'" class="settings-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>系统资源</span>
                </template>
                <div class="monitor-item">
                  <span>CPU使用率</span>
                  <el-progress :percentage="systemStats.cpu" :color="getProgressColor(systemStats.cpu)" />
                </div>
                <div class="monitor-item">
                  <span>内存使用率</span>
                  <el-progress :percentage="systemStats.memory" :color="getProgressColor(systemStats.memory)" />
                </div>
                <div class="monitor-item">
                  <span>磁盘使用率</span>
                  <el-progress :percentage="systemStats.disk" :color="getProgressColor(systemStats.disk)" />
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>设备状态</span>
                </template>
                <div class="stats-grid">
                  <div class="stat-item">
                    <div class="stat-value">{{ deviceStats.online }}</div>
                    <div class="stat-label">在线设备</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ deviceStats.offline }}</div>
                    <div class="stat-label">离线设备</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ deviceStats.error }}</div>
                    <div class="stat-label">故障设备</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ deviceStats.total }}</div>
                    <div class="stat-label">总设备数</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 日志管理 -->
        <div v-if="activeMenu === 'logs'" class="settings-form">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>日志管理</span>
                <div>
                  <el-button @click="refreshLogs">刷新</el-button>
                  <el-button @click="clearLogs" type="danger">清空日志</el-button>
                </div>
              </div>
            </template>
            <div class="log-filters">
              <el-select v-model="logFilter.level" placeholder="日志级别" style="width: 120px; margin-right: 10px;">
                <el-option label="全部" value="" />
                <el-option label="ERROR" value="error" />
                <el-option label="WARN" value="warn" />
                <el-option label="INFO" value="info" />
                <el-option label="DEBUG" value="debug" />
              </el-select>
              <el-date-picker
                v-model="logFilter.dateRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="margin-right: 10px;"
              />
              <el-input
                v-model="logFilter.keyword"
                placeholder="搜索关键词"
                style="width: 200px;"
                clearable
              />
            </div>
            <el-table :data="logs" style="width: 100%; margin-top: 20px;" max-height="400">
              <el-table-column prop="timestamp" label="时间" width="180" />
              <el-table-column prop="level" label="级别" width="80">
                <template #default="scope">
                  <el-tag :type="getLogLevelType(scope.row.level)">{{ scope.row.level }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="module" label="模块" width="120" />
              <el-table-column prop="message" label="消息" show-overflow-tooltip />
            </el-table>
          </el-card>
        </div>

        <!-- 备份恢复 -->
        <div v-if="activeMenu === 'backup'" class="settings-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>数据备份</span>
                </template>
                <el-form label-width="100px">
                  <el-form-item label="备份类型">
                    <el-radio-group v-model="backupSettings.type">
                      <el-radio label="full">完整备份</el-radio>
                      <el-radio label="incremental">增量备份</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="备份路径">
                    <el-input v-model="backupSettings.path" placeholder="选择备份路径">
                      <template #append>
                        <el-button @click="selectBackupPath">浏览</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="自动备份">
                    <el-switch v-model="backupSettings.autoBackup" />
                  </el-form-item>
                  <el-form-item v-if="backupSettings.autoBackup" label="备份频率">
                    <el-select v-model="backupSettings.frequency">
                      <el-option label="每日" value="daily" />
                      <el-option label="每周" value="weekly" />
                      <el-option label="每月" value="monthly" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="createBackup">立即备份</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>备份历史</span>
                </template>
                <el-table :data="backupHistory" style="width: 100%" max-height="300">
                  <el-table-column prop="name" label="备份名称" />
                  <el-table-column prop="size" label="大小" />
                  <el-table-column prop="date" label="创建时间" />
                  <el-table-column label="操作" width="120">
                    <template #default="scope">
                      <el-button size="small" @click="restoreBackup(scope.row)">恢复</el-button>
                      <el-button size="small" type="danger" @click="deleteBackup(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 报告中心 -->
        <div v-if="activeMenu === 'reports'" class="settings-form">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>报告中心</span>
                <el-button type="primary" @click="generateReport">生成报告</el-button>
              </div>
            </template>
            <el-tabs v-model="activeReportTab">
              <el-tab-pane label="设备报告" name="device">
                <div class="report-filters">
                  <el-date-picker
                    v-model="reportFilter.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                  <el-button type="primary" @click="generateDeviceReport">生成设备报告</el-button>
                </div>
              </el-tab-pane>
              <el-tab-pane label="性能报告" name="performance">
                <div class="report-filters">
                  <el-select v-model="reportFilter.metric" placeholder="选择指标">
                    <el-option label="CPU使用率" value="cpu" />
                    <el-option label="内存使用率" value="memory" />
                    <el-option label="网络流量" value="network" />
                  </el-select>
                  <el-button type="primary" @click="generatePerformanceReport">生成性能报告</el-button>
                </div>
              </el-tab-pane>
              <el-tab-pane label="安全报告" name="security">
                <div class="report-filters">
                  <el-button type="primary" @click="generateSecurityReport">生成安全报告</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>

        <!-- 告警管理 -->
        <div v-if="activeMenu === 'alerts'" class="settings-form">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>告警管理</span>
                <el-button type="primary" @click="addAlertRule">添加规则</el-button>
              </div>
            </template>
            <el-table :data="alertRules" style="width: 100%">
              <el-table-column prop="name" label="规则名称" />
              <el-table-column prop="condition" label="触发条件" />
              <el-table-column prop="level" label="告警级别">
                <template #default="scope">
                  <el-tag :type="getAlertLevelType(scope.row.level)">{{ scope.row.level }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="enabled" label="状态">
                <template #default="scope">
                  <el-switch v-model="scope.row.enabled" @change="toggleAlertRule(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button size="small" @click="editAlertRule(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deleteAlertRule(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>

        <!-- 系统信息 -->
        <div v-if="activeMenu === 'system-info'" class="settings-form">
          <!-- 关于系统标题 -->
          <div class="about-system-header">
            <h2>关于系统</h2>
          </div>

          <!-- 系统信息卡片 -->
          <el-card class="system-info-card">
            <div class="system-info-layout">
              <!-- 左侧：系统信息 -->
              <div class="system-info-left">
                <div class="system-info-section">
                  <h3>系统信息</h3>
                  <div class="info-grid">
                    <div class="info-row">
                      <span class="info-label">系统名称</span>
                      <span class="info-value">ONVIF设备管理系统</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">构建时间</span>
                      <span class="info-value">2025/6/23 03:18:03</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">开发框架</span>
                      <span class="info-value">Vue 3 + Element Plus</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">版本号</span>
                      <span class="info-value">v1.0.0</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">运行环境</span>
                      <span class="info-value">Node.js + Browser</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">后端技术</span>
                      <span class="info-value">Spring Boot + Java</span>
                    </div>
                  </div>
                </div>

                <!-- 主要功能 -->
                <div class="features-section">
                  <h3>主要功能</h3>
                  <div class="features-grid">
                    <div class="feature-category">
                      <div class="feature-icon">
                        <el-icon><Monitor></Monitor></el-icon>
                      </div>
                      <div class="feature-content">
                        <h4>设备管理</h4>
                        <ul>
                          <li>✓ ONVIF设备自动发现</li>
                          <li>✓ 设备连接状态监控</li>
                          <li>✓ 设备信息查看与配置</li>
                          <li>✓ 批量设备操作</li>
                        </ul>
                      </div>
                    </div>

                    <div class="feature-category">
                      <div class="feature-icon">
                        <el-icon><VideoCamera></VideoCamera></el-icon>
                      </div>
                      <div class="feature-content">
                        <h4>视频流管理</h4>
                        <ul>
                          <li>✓ 实时视频流预览</li>
                          <li>✓ 多画面同时显示</li>
                          <li>✓ 视频录制与回放</li>
                          <li>✓ 截图功能</li>
                        </ul>
                      </div>
                    </div>

                    <div class="feature-category">
                      <div class="feature-icon">
                        <el-icon><Setting></Setting></el-icon>
                      </div>
                      <div class="feature-content">
                        <h4>系统配置</h4>
                        <ul>
                          <li>✓ 网络参数配置</li>
                          <li>✓ 存储路径设置</li>
                          <li>✓ 安全策略配置</li>
                          <li>✓ 通知设置</li>
                        </ul>
                      </div>
                    </div>

                    <div class="feature-category">
                      <div class="feature-icon">
                        <el-icon><DataAnalysis></DataAnalysis></el-icon>
                      </div>
                      <div class="feature-content">
                        <h4>监控分析</h4>
                        <ul>
                          <li>✓ 设备状态统计</li>
                          <li>✓ 系统性能监控</li>
                          <li>✓ 日志查看与分析</li>
                          <li>✓ 报表生成</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧：许可证信息 -->
              <div class="system-info-right">
                <div class="license-section">
                  <h3>许可证信息</h3>
                  <div class="license-status">
                    <div class="license-icon">
                      <el-icon><Key></Key></el-icon>
                    </div>
                    <div class="license-info">
                      <div class="license-type">开源许可</div>
                      <div class="license-desc">本系统基于MIT许可证开源，您可以自由使用、修改和分发。</div>
                    </div>
                  </div>
                </div>

                <!-- 联系信息 -->
                <div class="contact-section">
                  <h3>联系信息</h3>
                  <div class="contact-item">
                    <span class="contact-label">开发团队</span>
                    <span class="contact-value">ONVIF管理系统开发组</span>
                  </div>
                  <div class="contact-item">
                    <span class="contact-label">技术支持</span>
                    <span class="contact-value">support@example.com</span>
                  </div>
                  <div class="contact-item">
                    <span class="contact-label">官方网站</span>
                    <span class="contact-value">https://example.com</span>
                  </div>
                  <div class="contact-item">
                    <span class="contact-label">文档地址</span>
                    <span class="contact-value">https://docs.example.com</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
         </div>


        </div>
      </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Setting, Connection, FolderOpened, Lock, Bell, Tools,
  User, Key, Monitor, Document, Download, DataAnalysis,
  Warning, InfoFilled, Plus, Refresh
} from '@element-plus/icons-vue'
import DeviceDiagnostic from './DeviceDiagnostic.vue'

const activeMenu = ref('basic')

const settings = reactive({
  basic: {
    systemName: 'ONVIF设备管理系统',
    adminEmail: 'admin@example.com',
    language: 'zh-CN',
    timezone: 'Asia/Shanghai',
    autoSave: true
  },
  network: {
    serverPort: 8080,
    onvifPort: 80,
    timeout: 30,
    retryCount: 3,
    enableHttps: false,
    proxy: ''
  },
  storage: {
    dataPath: './data',
    logPath: './logs',
    maxStorage: 100,
    autoCleanup: true,
    retentionDays: 30
  },
  security: {
    enableAuth: true,
    sessionTimeout: 60,
    passwordStrength: 'medium',
    enableAudit: true,
    ipWhitelist: ''
  },
  notification: {
    enableEmail: false,
    smtpServer: '',
    smtpPort: 587,
    senderEmail: '',
    emailPassword: '',
    deviceOffline: true,
    systemError: true,
    storageWarning: true
  }
})

// 新增数据
const users = ref([
  { id: 1, username: 'admin', email: 'admin@example.com', role: '管理员', status: 'active', lastLogin: '2024-01-15 10:30:00' },
  { id: 2, username: 'operator', email: 'operator@example.com', role: '操作员', status: 'active', lastLogin: '2024-01-14 16:45:00' },
  { id: 3, username: 'viewer', email: 'viewer@example.com', role: '查看者', status: 'inactive', lastLogin: '2024-01-10 09:15:00' }
])

const permissions = ref([
  {
    id: 1,
    label: '设备管理',
    children: [
      { id: 5, label: '查看设备' },
      { id: 6, label: '添加设备' },
      { id: 7, label: '编辑设备' },
      { id: 8, label: '删除设备' }
    ]
  },
  {
    id: 2,
    label: '系统设置',
    children: [
      { id: 9, label: '基本设置' },
      { id: 10, label: '网络设置' },
      { id: 11, label: '安全设置' }
    ]
  },
  {
    id: 3,
    label: '用户管理',
    children: [
      { id: 12, label: '查看用户' },
      { id: 13, label: '添加用户' },
      { id: 14, label: '编辑用户' },
      { id: 15, label: '删除用户' }
    ]
  }
])

const systemStats = reactive({
  cpu: 45,
  memory: 68,
  disk: 32
})

const deviceStats = reactive({
  online: 15,
  offline: 3,
  error: 1,
  total: 19
})

const logFilter = reactive({
  level: '',
  dateRange: [],
  keyword: ''
})

const logs = ref([
  { id: 1, timestamp: '2024-01-15 10:30:15', level: 'INFO', module: '设备管理', message: '设备 192.168.1.100 连接成功' },
  { id: 2, timestamp: '2024-01-15 10:25:32', level: 'WARN', module: '网络', message: '设备 192.168.1.101 连接超时' },
  { id: 3, timestamp: '2024-01-15 10:20:45', level: 'ERROR', module: '认证', message: '用户登录失败，IP: 192.168.1.200' },
  { id: 4, timestamp: '2024-01-15 10:15:12', level: 'DEBUG', module: '系统', message: '定时任务执行完成' }
])

const backupSettings = reactive({
  type: 'full',
  path: './backups',
  autoBackup: true,
  frequency: 'daily'
})

const backupHistory = ref([
  { id: 1, name: 'backup_20240115_103000.zip', size: '125MB', date: '2024-01-15 10:30:00' },
  { id: 2, name: 'backup_20240114_103000.zip', size: '120MB', date: '2024-01-14 10:30:00' },
  { id: 3, name: 'backup_20240113_103000.zip', size: '118MB', date: '2024-01-13 10:30:00' }
])

const activeReportTab = ref('device')
const reportFilter = reactive({
  dateRange: [],
  metric: ''
})

const alertRules = ref([
  { id: 1, name: 'CPU使用率过高', condition: 'CPU > 80%', level: 'high', enabled: true },
  { id: 2, name: '设备离线告警', condition: '设备离线时间 > 5分钟', level: 'medium', enabled: true },
  { id: 3, name: '存储空间不足', condition: '磁盘使用率 > 90%', level: 'high', enabled: false }
])



const licenseInfo = reactive({
  type: '企业版',
  licensee: 'ACME Corporation',
  expiry: '2025-12-31',
  maxDevices: 100,
  currentDevices: 19,
  status: 'valid'
})



const saveSettings = async () => {
  try {
    // TODO: 实现保存设置逻辑
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('设置保存失败')
  }
}

const resetSettings = async () => {
  try {
    await ElMessageBox.confirm('确定要重置所有设置吗？此操作不可撤销。', '确认重置', {
      type: 'warning'
    })

    // TODO: 实现重置设置逻辑
    ElMessage.success('设置已重置')
  } catch {
    // 用户取消
  }
}

const selectDataPath = () => {
  // TODO: 实现文件夹选择逻辑
  ElMessage.info('文件夹选择功能待实现')
}

const selectLogPath = () => {
  // TODO: 实现文件夹选择逻辑
  ElMessage.info('文件夹选择功能待实现')
}

const handleMenuSelect = (index) => {
  activeMenu.value = index
}

const getMenuTitle = () => {
  const menuTitles = {
    basic: '基本设置',
    network: '网络设置',
    storage: '存储设置',
    security: '安全设置',
    notification: '通知设置',
    diagnostic: '设备诊断',
    'software-info': '软件信息',
    users: '用户管理',
    permissions: '权限管理',
    monitoring: '系统监控',
    logs: '日志管理',
    backup: '备份恢复',
    reports: '报告中心',
    alerts: '告警管理',
    'system-info': '系统信息'
  }
  return menuTitles[activeMenu.value] || '系统设置'
}

// 新增方法
const addUser = () => {
  ElMessage.info('添加用户功能待实现')
}

const editUser = (user) => {
  ElMessage.info(`编辑用户: ${user.username}`)
}

const deleteUser = async (user) => {
  try {
    await ElMessageBox.confirm(`确定要删除用户 ${user.username} 吗？`, '确认删除', {
      type: 'warning'
    })
    ElMessage.success('用户删除成功')
  } catch {
    // 用户取消
  }
}

const savePermissions = () => {
  ElMessage.success('权限保存成功')
}

const resetPermissions = () => {
  ElMessage.info('权限已重置')
}

const getProgressColor = (percentage) => {
  if (percentage < 50) return '#67c23a'
  if (percentage < 80) return '#e6a23c'
  return '#f56c6c'
}

const refreshLogs = () => {
  ElMessage.success('日志已刷新')
}

const clearLogs = async () => {
  try {
    await ElMessageBox.confirm('确定要清空所有日志吗？此操作不可撤销。', '确认清空', {
      type: 'warning'
    })
    logs.value = []
    ElMessage.success('日志已清空')
  } catch {
    // 用户取消
  }
}

const getLogLevelType = (level) => {
  const types = {
    ERROR: 'danger',
    WARN: 'warning',
    INFO: 'info',
    DEBUG: 'info'
  }
  return types[level] || 'info'
}

const selectBackupPath = () => {
  ElMessage.info('文件夹选择功能待实现')
}

const createBackup = async () => {
  try {
    ElMessage.info('正在创建备份...')
    await new Promise(resolve => setTimeout(resolve, 2000))
    ElMessage.success('备份创建成功')
  } catch (error) {
    ElMessage.error('备份创建失败')
  }
}

const restoreBackup = async (backup) => {
  try {
    await ElMessageBox.confirm(`确定要恢复备份 ${backup.name} 吗？`, '确认恢复', {
      type: 'warning'
    })
    ElMessage.success('备份恢复成功')
  } catch {
    // 用户取消
  }
}

const deleteBackup = async (backup) => {
  try {
    await ElMessageBox.confirm(`确定要删除备份 ${backup.name} 吗？`, '确认删除', {
      type: 'warning'
    })
    ElMessage.success('备份删除成功')
  } catch {
    // 用户取消
  }
}

const generateReport = () => {
  ElMessage.info('生成报告功能待实现')
}

const generateDeviceReport = () => {
  ElMessage.success('设备报告生成成功')
}

const generatePerformanceReport = () => {
  ElMessage.success('性能报告生成成功')
}

const generateSecurityReport = () => {
  ElMessage.success('安全报告生成成功')
}

const addAlertRule = () => {
  ElMessage.info('添加告警规则功能待实现')
}

const editAlertRule = (rule) => {
  ElMessage.info(`编辑告警规则: ${rule.name}`)
}

const deleteAlertRule = async (rule) => {
  try {
    await ElMessageBox.confirm(`确定要删除告警规则 ${rule.name} 吗？`, '确认删除', {
      type: 'warning'
    })
    ElMessage.success('告警规则删除成功')
  } catch {
    // 用户取消
  }
}

const toggleAlertRule = (rule) => {
  ElMessage.success(`告警规则 ${rule.name} 已${rule.enabled ? '启用' : '禁用'}`)
}

const getAlertLevelType = (level) => {
  const types = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  }
  return types[level] || 'info'
}

// 系统信息相关方法
const refreshSystemInfo = () => {
  ElMessage.success('系统信息已刷新')
  // 这里可以调用API刷新系统信息
}




</script>

<style scoped>
.settings {
  padding: 20px;
}

.settings-layout {
  display: flex;
  gap: 20px;
  min-height: 600px;
}

.settings-sidebar {
  width: 200px;
  flex-shrink: 0;
}

.settings-menu {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.settings-content {
  flex: 1;
}

.settings-form {
  padding: 20px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form {
  max-width: 600px;
}

.el-menu-item {
  height: 48px;
  line-height: 48px;
}

.el-menu-item .el-icon {
  margin-right: 8px;
}

/* 新增样式 */
.monitor-item {
  margin-bottom: 20px;
}

.monitor-item span {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.log-filters {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.report-filters {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

/* 关于系统页面样式 */
.about-system-header {
  margin-bottom: 20px;
}

.about-system-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.system-info-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.system-info-layout {
  display: flex;
  gap: 40px;
  padding: 20px;
}

.system-info-left {
  flex: 2;
}

.system-info-right {
  flex: 1;
  min-width: 300px;
}

.system-info-section,
.license-section,
.contact-section {
  margin-bottom: 30px;
}

.system-info-section h3,
.license-section h3,
.contact-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.info-row .info-label {
  font-weight: 500;
  color: #606266;
}

.info-row .info-value {
  color: #303133;
  font-weight: 600;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-category {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #409eff;
  color: white;
  border-radius: 8px;
  font-size: 18px;
}

.feature-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.feature-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-content li {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
  line-height: 1.4;
}

.license-section {
  background: #f0f9ff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e1f5fe;
}

.license-status {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.license-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #52c41a;
  color: white;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
}

.license-info {
  flex: 1;
}

.license-type {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.license-desc {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

.contact-section {
  background: #fafafa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e8e8e8;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-label {
  font-weight: 500;
  color: #606266;
}

.contact-value {
  color: #303133;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .system-info-layout {
    flex-direction: column;
    gap: 20px;
  }

  .system-info-right {
    min-width: auto;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .feature-category {
    flex-direction: column;
    text-align: center;
  }

  .feature-icon {
    align-self: center;
  }
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 500;
  color: #666;
}

.info-value {
  color: #333;
}

.el-sub-menu .el-menu-item {
  padding-left: 40px !important;
}

.el-sub-menu__title {
  font-weight: 500;
}

@media (max-width: 768px) {
  .settings-layout {
    flex-direction: column;
  }

  .settings-sidebar {
    width: 100%;
    margin-bottom: 20px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .report-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .log-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .log-filters > * {
    margin-bottom: 10px;
    margin-right: 0 !important;
  }
}

/* 系统信息页面样式 */
.system-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.info-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.info-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-item {
  margin-bottom: 12px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f7fa;
}

.service-item:last-child {
  border-bottom: none;
}

.service-info {
  flex: 1;
}

.service-name {
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.service-desc {
  font-size: 12px;
  color: #909399;
}

.service-actions {
  display: flex;
  gap: 8px;
}

.env-var-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 8px;
}

.env-var-name {
  font-weight: 600;
  color: #303133;
  font-family: 'Courier New', monospace;
}

.env-var-value {
  color: #606266;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jvm-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f5f7fa;
}

.jvm-metric:last-child {
  border-bottom: none;
}

.metric-label {
  color: #606266;
  font-size: 14px;
}

.metric-value {
  color: #303133;
  font-weight: 500;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-connected {
  background: #f0f9ff;
  color: #1890ff;
}

.status-disconnected {
  background: #fff2f0;
  color: #ff4d4f;
}

.network-interface {
  margin-bottom: 16px;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
}

.interface-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.interface-name {
  font-weight: 600;
  color: #303133;
}

.interface-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  font-size: 12px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-label {
  color: #909399;
  margin-bottom: 2px;
}

.detail-value {
  color: #303133;
  font-weight: 500;
}
</style>
